<template>
  <div>
    <el-dialog
      title="表单预览"
      :visible="visible"
      width="80%"
      @close="visible = false"
      :close-on-click-modal="false"
    >
      <controlPanel ref="controlPanel" :isEdit="isEdit"></controlPanel>

      <span slot="footer" class="dialog-footer">
        <el-button @click="visible = false" size="small">取 消</el-button>
        <el-button type="primary" @click="confirm" size="small"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import controlPanel from "@/views/workflows/formDesign/controlPanel.vue";
import defaultToVfrom from "@/views/workflows/formDesign/designContentConverters/defaultToVfrom";
export default {
  components: { controlPanel },
  props: {
    value: {
      id: 1,
    },
  },
  watch: {
    value: {
      handler() {
        //this.load();
      },
      deep: true,
    },
    visible(newVal, oldVal) {
      if (!newVal && oldVal) this.hide();
    },
  },
  model: {
    prop: "value",
    event: "change",
  },
  data() {
    return {
      loading: false,
      visible: false,
      form: {
        name: "",
        formDesignId: {},
      },
      controls: [],
      selections: [],
      rules: {
        // title: [{ required: true, message: "请输入", trigger: "change" }],
        // designId: [{ required: true, message: "请选择", trigger: "change" }],
      },
      isEdit: false,
      workHistories: [],
      designFramework:'vform',
    };
  },
  methods: {
    confirm() {
      this.commit();
    },
    show(value) {
      this.visible = true;
      if (value) this.loadData(value);
    },
    hide() {
      this.visible = false;
      this.form = {
        name: "",
        formDesignId: {},
        formData: {},
      };
    },
    loadData(value) {
      this.loading = true;
      this.getDesign(value).then((controls) => {
        this.loading = false;
        //this.$set(this.form, "formData", JSON.parse(res.formData || "{}"));
        this.$refs.controlPanel.setValue(
          controls,
          {}
        );
      });
    },
    commit() {
      this.$emit("ok-click", {});
      this.hide();
    },
    getDesign(id) {
        
      return this.$store
        .dispatch("dynamicFormDesign/getFormDesignVersion", id)
        .then((res) => {
          if (res && res.designContent){
            if(res.designFramework !=this.designFramework)
            {
              return defaultToVfrom(res.designContent)
            }
            else{
              return JSON.parse(res.designContent||'{}')
            }
          }
          else return null;
        });
    },
  },
};
</script>

<style>
.card-provehistory .historylabel {
  color: #999999;
}
</style>
